<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .floor{width:400px;height:500px;font-size: 100px;line-height:500px;text-align: center;margin: 0 auto;}
        .floor:nth-child(1){background: #393;}
        .floor:nth-child(2){background: #399;}
        .floor:nth-child(3){background: #993;}
        .floor:nth-child(4){background: #939;}
        .floor:nth-child(5){background: #339;}

        .list{width:100px;list-style: none;padding:0;margin: 0;position: fixed;left: 0;top:200px;background: #ccc;}
        .list li{line-height:30px;text-align: center;cursor: pointer;}
        .list li:hover{background: #77f;color: #fff;}
        .list li:active{background: #33f;color: #fff;}

    </style>
</head>
<body>
    <div class="floor">一楼</div>
    <div class="floor">二楼</div>
    <div class="floor">三楼</div>
    <div class="floor">四楼</div>
    <div class="floor">五楼</div>

    <ul class="list">
        <li>一楼</li>
        <li>二楼</li>
        <li>三楼</li>
        <li>四楼</li>
        <li>五楼</li>
    </ul>
</body>
<script>

    var lis = document.querySelectorAll(".list li")
    var floors = document.querySelectorAll(".floor")

    var t = null;

    for(var i=0;i<lis.length;i++){
        lis[i].ghjk = i;
        lis[i].onclick = function(){
            clearInterval(t);
            // 点击时，根据点击的按钮的索引，获取到楼层元素，获取目标元素的偏移距离，作为滚动目标
            var target = floors[this.ghjk].offsetTop;
            // 开启计时器
            t = setInterval(function(){
                // 获取当前滚走的距离，作为当前值
                var now = document.documentElement.scrollTop;
                // 计算步长：存在目标比当前大，步长为正；目标比当前小，步长为负
                var speed = target > now ? 100 : -100;
                // 判断剩下距离是否小于一步
                if(Math.abs(target - now) < Math.abs(speed)){
                    // 小于一步，停止计时器
                    clearInterval(t);
                    // 强行设置到终点
                    document.documentElement.scrollTop = target;
                }else{
                    // 正常改变滚动距离
                    document.documentElement.scrollTop += speed;
                }
            },30);
        }
    }

</script>
</html>